<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 头部 -->
        <div class="questionsHeader">
          <span style="color: pink; font-size: 12px"
            >说明：目前支持学科和关键字条件筛选</span
          >
          <el-button
            type="success"
            size="mini"
            icon="el-icon-edit"
            @click="$router.push({ path: 'new' })"
            >新增试题
          </el-button>
        </div>

        <!-- 表单区域 -->
        <!-- label-position 属性可以改变表单域标签的位置 -->
        <el-form
          :label-position="labelPosition"
          ref="questionsForm"
          :model="questionsTableData"
          label-width="80px"
          class="questionsForm"
        >
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="学科">
                <el-select
                  v-model="questionsTableData.subjectID"
                  placeholder="请选择"
                  @change="directorySimple(questionsTableData.subjectID)"
                >
                  <el-option
                    v-for="item in subjectNameList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="二级目录">
                <el-select
                  v-model="questionsTableData.catalogID"
                  placeholder="请选择"
                  @change="tagSimple(questionsTableData.catalogID)"
                >
                  <el-option
                    v-for="item in directoryTableList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="标签">
                <el-select
                  v-model="questionsTableData.tags"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in tagTableList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="关键字">
                <el-input
                  v-model="questionsTableData.keyword"
                  placeholder="根据题干搜索"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="试题类型">
                <el-select
                  v-model="questionsTableData.questionType"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in questionType"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="难度">
                <el-select
                  v-model="questionsTableData.difficulty"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in difficulty"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="方向">
                <el-select
                  v-model="questionsTableData.direction"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, id) in direction"
                    :key="id"
                    :label="item"
                    :value="id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="录入人">
                <el-select
                  v-model="questionsTableData.creatorID"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in usernameList"
                    :key="item.id"
                    :label="item.username"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="题目备注">
                <el-input v-model="questionsTableData.remarks"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="企业简称">
                <el-input v-model="questionsTableData.shortName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="城市">
                <div class="citySelect">
                  <el-select
                    v-model="questionsTableData.province"
                    placeholder="请选择"
                    style="margin-right: 10px"
                    @change="provinceChange(questionsTableData.province)"
                  >
                    <el-option
                      v-for="(item, id) in provinceList"
                      :key="id"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                  <el-select
                    v-model="questionsTableData.city"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="(item, id) in cityList"
                      :key="id"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item style="float: right">
                <div class="btnGroup">
                  <el-button type="primary" @click="removeForm" size="mini"
                    >清除</el-button
                  >
                  <el-button @click="searchForm" size="mini">搜索</el-button>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <!-- 警告提示 -->
        <!-- closable属性决定是否可关闭  -->
        <!-- show-icon 是否显示图标 -->
        <el-alert
          :title="'数据一共 ' + total + ' 条'"
          :closable="false"
          type="info"
          show-icon
        >
        </el-alert>

        <!-- 表格区域 -->
        <!-- row-class-name 属性来为 Table 中的某一行添加 class，表明该行处于某种状态 -->
        <el-table
          :data="questionsTableList"
          style="width: 100%"
          :row-class-name="questionsTableRowClassName"
        >
          <el-table-column prop="number" label="试题编号"></el-table-column>
          <el-table-column prop="subject" label="学科"></el-table-column>
          <el-table-column prop="catalog" label="目录"></el-table-column>
          <el-table-column prop="questionType" label="题型">
            <template slot-scope="scope">
              {{ scope.row.questionType | formatQuestions }}
            </template>
          </el-table-column>
          <el-table-column prop="question" label="题干">
            <template slot-scope="scope">
              {{ highlight(scope.row.question) }}
            </template>
          </el-table-column>
          <el-table-column label="录入时间">
            <template slot-scope="scope">
              {{ scope.row.addDate | formatTime }}
            </template>
          </el-table-column>
          <el-table-column prop="difficulty" label="难度">
            <template slot-scope="scope">
              {{ scope.row.difficulty | formatDifficulty }}
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="录入人"></el-table-column>
          <el-table-column prop="address" label="操作" width="200px">
            <template slot-scope="scope">
              <el-button
                icon="el-icon-view"
                type="primary"
                plain
                circle
                size="mini"
                @click="preview(scope.row.id)"
              ></el-button>
              <!-- <el-button
                icon="el-icon-edit"
                type="success"
                plain
                circle
                size="mini"
                @click="$router.push({path:'new',query:{id:scope.row.id}})"
              ></el-button> -->
              <el-button
                icon="el-icon-edit"
                type="success"
                plain
                circle
                size="mini"
                @click="edit(scope.row)"
              ></el-button>
              <el-button
                icon="el-icon-delete"
                type="danger"
                plain
                circle
                size="mini"
                @click="deleteClick(scope.row)"
              ></el-button>
              <el-button
                icon="el-icon-check"
                type="warning"
                plain
                circle
                size="mini"
                @click="join(scope.row.id)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页区域 -->
        <!-- size-change和current-change事件来处理页码大小和当前页变动时候触发的事件 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="questionsTableData.page"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="questionsTableData.pagesize"
          layout="prev, pager, next,sizes, jumper"
          background
          :total="total"
        >
        </el-pagination>
      </el-card>

      <!-- 预览对话框 -->
      <el-dialog
        title="题目预览"
        :visible.sync="previewDialogVisible"
        width="50%"
      >
        <div>
          <div>
            <div>
              <el-row :gutter="20">
                <el-col :span="6">
                  <span>【题型】：{{previewTableData.questionType | formatQuestions}}</span>
                </el-col>
                <el-col :span="6">
                  <span>【编号】：{{previewTableData.id}}</span>
                </el-col>
                <el-col :span="6">
                  <span>【难度】：{{previewTableData.difficulty|formatDifficulty}}</span>
                </el-col>
                <el-col :span="6">
                  <span>【标签】：{{previewTableData.tags}}</span>
                </el-col>
              </el-row>
            </div>
            <div style="margin: 15px 0">
              <el-row :gutter="20">
                <el-col :span="6">
                  <span>【学科】：{{previewTableData.subjectName}}</span>
                </el-col>
                <el-col :span="6">
                  <span>【目录】：{{previewTableData.directoryName}}</span>
                </el-col>
                <el-col :span="6">
                  <span>【方向】：{{previewTableData.direction}}</span>
                </el-col>
                <el-col :span="6"></el-col>
              </el-row>
            </div>
          </div>
          <hr />

          <div>
            <p>【题干】：</p>
            <p style="color: blue" v-html="previewTableData.remarks"></p>
          </div>

          <div>

            <!-- 单选 -->
              <div  v-if="previewTableData.questionType === '1'">
                <p>{{previewTableData.questionType | formatQuestions}} 选项：（以下选中的选项为正确答案）</p>
                <div v-for="item in previewTableData.options" :key="item.id">
                  <el-radio :key="item.id" v-if="item.isRight===0" :label="item.code"  style="display: block;margin: 10px 10px"> {{item.title}} </el-radio>
                  <el-radio v-else  style="display: block;margin: 10px 10px">{{item.title}}</el-radio>
                </div>
              <!-- <el-radio-group v-model="previewTableData.options"
              >
                <el-radio v-for="item  in previewTableData.options" :key="item.id" :label="item.title" style="display: block;margin: 10px 10px"></el-radio>
              </el-radio-group> -->
              </div>

              <!-- 多选 -->
             <div v-else-if="previewTableData.questionType === '2'">
               <p>{{previewTableData.questionType | formatQuestions}} 选项：（以下选中的选项为正确答案）</p>
              <!-- <el-checkbox-group  v-model="previewTableData.options" >
                <el-checkbox v-for="item in previewTableData.options" :key="item.id" :label="item.title"
                  style="display: block;margin: 10px 10px"
                ></el-checkbox>
              </el-checkbox-group> -->
              <el-checkbox-group >
              <div v-for="item in previewTableData.options" :key="item.id">
                  <el-checkbox  :key="item.id" v-if="item.isRight===0" :label="item.code" checked  style="display: block;margin: 10px 10px"> {{item.title}} </el-checkbox>
                  <el-checkbox  v-else  style="display: block;margin: 10px 10px">{{item.title}}</el-checkbox>
              </div>
              </el-checkbox-group>
             </div>
             <!-- 简单 -->
             <div v-else></div>

          </div>
          <hr />
          <div >
            <div style=" display: flex;align-items: center;">
            <span>【参考答案】：</span>
            <span v-html="previewTableData.answer"></span>
            </div>
            <el-button @click="showVido=true">视频答案预览</el-button>
            <div>
              <video v-if="showVido"
                height="300"
                controls="controls"
                autoplay="autoplay"
                :src="previewTableData.videoURL"
              ></video>
            </div>
          </div>
          <hr />

          <div>
            <span>【答案解析】：</span>
            <span v-html="previewTableData.answer"></span>
            <!-- {{previewTableData.answer}} -->
            </div>
          <hr />

          <div>【题目备注】：{{previewTableData.remarks}}</div>
        </div>
        <span slot="footer">
          <el-button type="primary" @click="previewDialogVisible = false"
            >关 闭</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
// 导入 dayjs
import dayjs from 'dayjs'
import { list, choiceAdd, remove, detail } from '@/api/hmmm/questions'
import { simple as subjectSimple } from '@/api/hmmm/subjects'
import { simple as directorySimple } from '../../api/hmmm/directorys'
import { simple as tagSimple } from '../../api/hmmm/tags'
import { simple as userSimple } from '../../api/base/users'
import { provinces, citys } from '../../api/hmmm/citys'

export default {
  name: 'Questions',
  filters: {
    // 格式化时间
    formatTime (time) {
      // dayjs 方法接收需要格式化的时间
      // format 方法是指按照哪种格式对时间进行格式化
      return dayjs(time).format('YYYY-MM-DD hh:mm:ss')
    },
    // 题型枚举
    formatQuestions (val) {
      // console.log(val)
      const obj = questionType.find((item) => item.value === Number(val))
      // console.log(obj)
      if (obj) {
        return obj.label
      } else {
        return '未知'
      }
    },
    // 难度枚举
    formatDifficulty (val) {
      const obj = difficulty.find((item) => item.value === Number(val))
      // console.log(obj)
      if (obj) {
        return obj.label
      } else {
        return '未知'
      }
    }
  },
  data () {
    return {
      // 表单域标签的位置 右对齐
      labelPosition: 'right',
      // 总条数
      total: 0,
      // 城市列表
      provinceList: [],
      // 城市下地区列表
      cityList: [],
      // 试题类型
      questionType: questionType,
      // 难度(命名都一样)
      difficulty: difficulty,
      // 方向
      direction: direction,
      // 学科列表
      subjectNameList: {},
      // 目录
      directoryTableList: [],
      // 标签列表
      tagTableList: [],
      // 录入人列表
      usernameList: [],
      // 渲染表格数据
      questionsTableList: [],
      // 表格数据
      questionsTableData: {
        page: 1,
        pagesize: 5,
        subjectID: null, // 学科
        difficulty: null, // 难度
        questionType: null, // 试题类型
        tags: null, // 标签名称
        province: null, // 企业所在地省份
        city: null, // 企业所在城市
        keyword: null, // 关键字
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        direction: null, // 方向
        creatorID: null, // 录入人
        catalogID: null // 目录
      },
      // 预览数据
      previewTableData: {},
      // 控制 预览对话框的显示与隐藏
      previewDialogVisible: false,
      // 控制视频的显示
      showVido: false
    }
  },
  created () {
    // 导入过来的城市  provinces()  赋值给 provinceList
    this.provinceList = provinces()
    // 调用获取学科的方法
    this.subjectSimple()
    // 调用获取录入人的方法
    this.userSimple()
    // 调用渲染表格的方法
    this.questionsList()
  },
  methods: {
    // 城市
    provinceChange (name) {
      // console.log(name)
      // 找对应的城市下地区
      this.cityList = citys(name)
    },
    // 获取学科
    async subjectSimple () {
      const res = await subjectSimple()
      // console.log(res)
      this.subjectNameList = res.data
    },
    // 获取二级目录
    async directorySimple (id) {
      const res = await directorySimple(id)
      this.directoryTableList = res.data
      // console.log(res)
    },
    // 获取标签
    async tagSimple (id) {
      const res = await tagSimple(id)
      // console.log(res)
      this.tagTableList = res.data
    },
    // 获取录入人
    async userSimple () {
      const res = await userSimple()
      // console.log(res)
      this.usernameList = res.data
    },
    // 渲染表格
    async questionsList () {
      const res = await list(this.questionsTableData)
      this.questionsTableList = res.data.items
      this.total = res.data.counts
      // console.log(res.data.counts)
    },
    // 清空表单内容
    removeForm () {
      // 表格数据
      this.questionsTableData = {}
      // this.$refs.questionsForm.resetFields()
    },
    // 搜索功能
    async searchForm () {
      this.questionsList()
    },
    questionsTableRowClassName ({ row, rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row'
      } else if (rowIndex === 3) {
        return 'success-row'
      }
      return ''
    },
    // 分页
    handleSizeChange (newSize) {
      this.questionsTableData.pagesize = newSize
      // console.log(newSize)
      this.questionsList()
    },
    handleCurrentChange (newPage) {
      this.questionsTableData.page = newPage
      // console.log(newPage)
      this.questionsList()
    },
    // 题干  去除html标签
    highlight (item) {
      return item.replace(/<[^>]+>/g, '') // 去掉所有的html标记
    },
    // 预览
    async preview (id) {
      // console.log(id)
      const data = { id }
      const res = await detail(data)
      // console.log(res.data)
      this.previewTableData = res.data
      // console.log(this.previewTableData.options)
      // this.previewTableData.options.map(item => {
      //   console.log(item)
      //   if (item.isRight === '1') {
      //     this.isRight = true
      //   } else {
      //     this.isRight = false
      //   }
      // })

      this.previewDialogVisible = true
    },
    // 编辑
    async  edit (row) {
      // 跳转到编辑页面
      // this.$router.push({ path: 'new', query: { id: row.id } })
      // 调用编辑的接口

      const res = await detail({ id: row.id })
      this.$router.push({
        path: 'new',
        query: {
          data: res.data, isUpData: true
        }
      })
      console.log(res)
    },

    // 删除
    async deleteClick (row) {
      const confirmRes = await this.$confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)

      // console.log(confirmRes)
      if (confirmRes === 'cancel') return this.$message('您取消了删除')
      await remove(row)

      // 删除成功后的提示
      this.$message.success('删除成功！')
      this.questionsList()
    },

    // 加入
    async join (id) {
      const confirmRes = await this.$confirm(
        '此操作将该题目加入精选, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        }
      ).catch((err) => err)

      if (confirmRes === 'cancel') return this.$message('您取消了删除')
      const data = { id: id, choiceState: 1 }
      await choiceAdd(data)

      // 加入成功后的提示
      this.$message.success('加入精选成功')
      this.questionsList()
    }
  }
}
</script>

<style scoped>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
.questionsHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.questionsForm {
  margin-top: 20px;
}
.el-select {
  width: 100% !important;
}
.el-alert {
  margin: 20px 0;
}

.el-pagination {
  float: right;
  margin: 20px 0;
}

.citySelect {
  display: flex;
  align-items: center;
}

.btnGroup {
  display: flex;
  align-items: center;
}
</style>
